<template>
  <div>
    <div>
      <!-- 搜索 -->
      <div class="toolbar">
        <el-input
          v-model="querycode.hcode"
          placeholder="请输入货代订单编号"
          style="width: 200px; margin-right: 10px"
        />
        <el-input
          v-model="querycode.pcode"
          placeholder="请输入供应商单号"
          style="width: 200px; margin-right: 10px"
        />
        <el-input
          v-model="querycode.code"
          placeholder="请输入客户单号"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="init">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
      <!-- 表格数据 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        border
        row-key="id"
      >
        <el-table-column
          label="序号"
          type="index"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="code"
          label="客户订单号"
          width="180"
          header-align="center"
        />
        <el-table-column
          prop="cname"
          label="客户名称"
          width="180"
          header-align="center"
        />
        <el-table-column label="产品" width="180" header-align="center">
          <template #default="{ row }">
            {{ row.product }}
            <div style="float: right">
              <el-button
                type="primary"
                size="small"
                @click="gopro(row.product, row.num, row.price)"
                >详情</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="供应商" width="180" header-align="center">
          <template #default="{ row }">
            {{ row.pname }}
            <div style="float: right">
              <el-button
                type="primary"
                size="small"
                @click="govendor(row.pcode, row.pname, row.pprice)"
                >详情</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="货代" width="180" header-align="center">
          <template #default="{ row }">
            {{ row.product }}
            <div style="float: right">
              <el-button
                type="primary"
                size="small"
                @click="
                  gohuo(row.hcode, row.hname, row.hprice, row.start, row.end)
                "
              >
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="account"
          label="销售"
          width="180"
          header-align="center"
        />
        <el-table-column label="利润" width="150" header-align="center">
          <template #default="{ row }">
            {{ row.price - row.pprice - row.hprice }}
          </template>
        </el-table-column>
      </el-table>

      <Lookhuo
        ref="lookhuo"
        :visible="isShow3"
        @close="handleClose3"
        @refresh="init()"
      />
      <Lookvendor
        ref="lookvendor"
        :visible="isShow2"
        @close="handleClose2"
        @refresh="init()"
      />
      <Lookpro
        ref="lookpro"
        :visible="isShow1"
        @close="handleClose1"
        @refresh="init()"
      />
    </div>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getall } from "@/api/order.js";
import Lookhuo from "./Lookhuo.vue";
import Lookvendor from "./Lookvendor.vue";
import Lookpro from "./Lookpro.vue";
//表格数据
const tableData = ref([]);
const lookpro = ref(null);
const lookhuo = ref(null);
const lookvendor = ref(null);
//是否显示新增用户
const isShow1 = ref(false);
const isShow2 = ref(false);
const isShow3 = ref(false);
const querycode = ref({
  code: "",
  pcode: "",
  hcode: ""
});
//更新状态用

function reset() {
  querycode.value.code = "";
  querycode.value.pcode = "";
  querycode.value.hcode = "";
  init();
}
function gohuo(hcode, hname, hprice, start, end) {
  isShow3.value = true;
  lookhuo.value.init(hcode, hname, hprice, start, end);
}
function govendor(pcode, pname, pprice) {
  isShow2.value = true;
  lookvendor.value.init(pcode, pname, pprice);
}
function gopro(product, num, price) {
  isShow1.value = true;
  lookpro.value.init(product, num, price);
}
function handleClose3() {
  isShow3.value = false; // 隐藏对话框
}
function handleClose2() {
  isShow2.value = false; // 隐藏对话框
}
function handleClose1() {
  isShow1.value = false; // 隐藏对话框
}

//方法
async function init() {
  let params = {
    pcode: querycode.value.pcode,
    code: querycode.value.code,
    hcode: querycode.value.hcode
  };
  console.log(params);

  let res = await getall(params);
  if (res.code == 200) {
    tableData.value = res.data;
  }
}

//生命周期钩子
onBeforeMount(() => {
  init();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.toolbar {
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  padding-left: 20px;
}
</style>
